<template>
  <view>
    <view class="wrap bd t1">
      <view class="u-tabs-box" style="width: 750rpx">
        <!-- <u-tabs-swiper activeColor="#18C7E2" inactive-color="#717171" ref="tabs" height="120" bar-width="100"
					bar-height="0" :list="list" :current="current" @change="change" class="bd" :is-scroll="false"
					swiperWidth="750" font-size="32"></u-tabs-swiper> -->
        <u-tabs
          activeColor="#18C7E2"
          :list="list"
          :is-scroll="true"
          :item-width="260"
          bar-height="0"
          font-size="32"
          :current="current"
          @change="change"
          class="bd"
        ></u-tabs>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view
              v-if="!showTip1"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              >您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue1()"
                >预约</span
              ></view
            >
            <view
              class="u-item"
              style="padding: 30upx"
              v-for="(v, index) in orderList"
              :key="index"
              v-show="v.checkType == 1"
            >
              <reminder planType="8" v-if="showTip1"></reminder>
              <view class="flex flex-j-b">
                <view class="flex" style="font-size: 30upx; font-weight: 900">
                  <view>{{ v.planName }}</view>
                </view>
                <view>
                  <u-tag
                    text="预约"
                    type="warning"
                    shape="circle"
                    v-if="v.subscribe"
                    style="background-color: #18c7e1; color: #fff"
                  />
                </view>
              </view>
              <view
                v-for="(v1, index1) in v.vaccinesPlans"
                :key="index1"
                @tap="goVacDetail(v1)"
                class="flex flex-j-b flex-al-c item-li uni-item-line"
              >
                <view>
                  <view class="">
                    <u-tag
                      :text="v1.type == 1 ? '免费' : '自费'"
                      type="warning"
                      size="mini"
                      bg-color="#fff"
                      :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                      :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                    />

                    <text
                      style="
                        padding: 0 14upx;
                        display: inline-block;
                        margin-bottom: 20upx;
                      "
                      >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)</text
                    >
                    <!-- <u-tag v-if="v1.type=='2'" :text="v1.adequate=='0'?'库存充足':'库存不足'" type="error" size="mini" style="background-color: #F7BB3B;color: #fff;" /> -->
                  </view>
                </view>
                <view
                  class="flex flex-al-c"
                  style="
                    width: 200upx;
                    font-size: 20upx;
                    justify-content: flex-end;
                  "
                >
                  <view
                    class="iconfont iconarrow-right"
                    style="font-size: 40upx; color: #c3c3c3"
                  >
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view
              v-if="!showTip2"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              >您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue2()"
                >预约</span
              ></view
            >
            <reminder planType="7" v-if="showTip2"></reminder>
            <view class="c-list">
              <view
                class="c-item uni-item-line"
                style="padding: 30upx 30upx 20upx 40upx"
                v-for="(v, index) in tjlist"
                :key="index"
                @click="gofin(v)"
                v-show="v.checkType == 1"
              >
                <view class="flex flex-j-b">
                  <view
                    style="font-size: 34upx; font-weight: 900; color: #444"
                    >{{ v.planName }}</view
                  >
                  <view class="flex">
                    <view> </view>
                  </view>
                </view>
                <view>体检项目：<span v-html="v.planRemark"></span></view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view
              v-if="!showTipDoor"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              >您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue3()"
                >预约</span
              ></view
            >
            <reminder planType="12" v-if="showTipDoor"></reminder>
          </scroll-view>
        </swiper-item>
        <swiper-item
          class="swiper-item"
          v-for="item in list.slice(3, list.length)"
        >
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <reminder
              :deptId="item.deptId"
              :deptName="item.name"
              v-if="showTipDoor1 && item.deptId == hasDeptId"
            ></reminder>
            <view
              v-else="showTipDoor1"
              style="
                font-size: 38rpx;
                text-align: center;
                line-height: 70vh;
                height: 100vh;
              "
              >您还未预约，请先去<span
                style="color: #007aff !important; cursor: pointer"
                @click="goyuyue3()"
                >预约</span
              ></view
            >
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-modal
      v-model="vacShow"
      content="请确定完成疫苗接种"
      :show-cancel-button="true"
      @confirm="vacConfirm"
      @cancel="vacCancel"
    ></u-modal>
  </view>
</template>

<script>
import reminder from "@/components/reminder.vue";
import reminder2 from "@/components/reminder2.vue";
import { parseTime } from "@/utils/parseTime";
export default {
  components: {
    reminder,
    reminder2,
  },
  data() {
    return {
      orderList: [], //接收数据
      tjlist: [], //体检计划
      list: [
        {
          name: "疫苗接种",
        },
        {
          name: "健康体检",
        },
        {
          name: "门诊预约",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      vacShow: false,
      vacId: "",
      sq: "",
      showTip1: false,
      appointment1: false,
      showTip2: false,
      showTipDoor: false,
      appointment2: false,
      carshow: "", //判断动态的科室是否显示
      hasDeptId: "", //有预约卡片的id
      showTipDoor1: false, //动态科室卡片
    };
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/home/home",
    });
    return true;
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad(option) {
    this.dtname = option.name;
    this.dtype = option.type;
    console.log(option);
    this.getAnyId();
    this.getPhyList();
    this.getVacList();
    this.getUniIntro();

    if (JSON.stringify(option) == "{}") {
      this.getYyKs(); //获得最早预约但未取消的信息
    } else {
      this.getKsIndex(this.dtname, this.dtype);
    }
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    //获得最早预约但未取消的信息
    getYyKs() {
      this.config
        .get("/subscribesInfos/getUserSubscribeInfo", {})
        .then((res) => {
          console.log(res);
          if (res.data.data) {
            if (res.data.data.flag == 1) {
              this.dtname = 0;
              this.dtype = res.data.data.type;
            } else {
              this.dtname = res.data.data.type;
              this.dtype = 0;
              const ksName = res.data.data.type;
              const newIndex = this.list.findIndex((a) => a.name == ksName);
              if (newIndex != -1) {
                console.log(newIndex);
                this.getCard(this.list[newIndex].deptId);
              }
            }
            setTimeout((s) => {
              this.getKsIndex(this.dtname, this.dtype);
            }, 800);
          }
        });
    },
    getKsIndex(name, type) {
      //动态tab
      if (type == 8) {
        this.getVacList();
        this.change(0);
      } else if (type == 7) {
        this.getPhyList();
        this.change(1);
      } else if (type == 12) {
        this.getDoor();
        this.change(2);
      } else {
        const ksName = name;
        const newIndex = this.list.findIndex((a) => a.name == ksName);
        if (newIndex != -1) {
          console.log(newIndex);
          this.change(newIndex);
          this.getCard(this.list[newIndex].deptId);
        }
      }
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    //获得新卡片
    getCard(id) {
      let self = this;
      this.config
        .get("/getSysDept/getCardSubscribe", {
          deptId: id || "",
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data.checkType == "1") {
              self.showTipDoor1 = true;
              self.hasDeptId = res.data.data.deptId;
            }
            if (
              res.data.data.checkType == "2" &&
              res.data.data.checkType == "0"
            ) {
              self.showTipDoor1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //获取动态科室
    getAnyId() {
      this.config.get("/getSysDept/getOther", {}).then((res) => {
        // console.log(res)
        for (let i = 0; i < res.data.data.length; i++) {
          if (
            res.data.data[i].population == 0 ||
            res.data.data[i].population == 4
          ) {
            let datas = {
              name: res.data.data[i].deptName,
              deptId: res.data.data[i].deptId,
            };
            this.list.push(datas);
          }
        }
        setTimeout((s) => {
          this.getKsIndex(this.dtname, this.dtype);
        }, 1000);
      });
    },
    goyuyue1() {
      uni.navigateTo({
        url: "./yuyueym",
      });
    },
    goyuyue2() {
      uni.navigateTo({
        url: "./yuyuetj",
      });
    },
    goyuyue3() {
      uni.navigateTo({
        url: "./yuyueindex",
      });
    },
    getVacList() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/oldInfo/getPlanListYy", {
          pageNum: 1,
          pageSize: 99,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.orderList = res.data.data.list;
            if (!res.data.data) return;
            if (self.orderList[0].checkType == "1") {
              self.appointment1 = false;
              self.showTip1 = true;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    //门诊预约
    getDoor() {
      let self = this;
      this.config.get("/anency/outpatient/getOutpatient", {}).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.checkType == "1") {
            self.showTipDoor = true;
          }
          if (
            res.data.data.checkType == "2" &&
            res.data.data.checkType == "0"
          ) {
            self.showTipDoor = false;
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    getPhyList() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/oldInfo/getPlanListTj", {
          pageNum: 1,
          pageSize: 99,
        })
        .then((res) => {
          console.log(res);
          uni.hideLoading();
          if (res.data.code === 200) {
            self.tjlist = res.data.data.list;
            if (!res.data.data) return;
            if (self.tjlist[0].checkType == "1") {
              self.appointment2 = false;
              self.showTip2 = true;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getPlan() {
      uni.redirectTo({
        url: "/pages/main/old/daiban",
      });
    },
    getPlanss() {
      uni.redirectTo({
        url: "/pages/main/old/daiban",
      });
    },
    getUniIntro() {
      let self = this;
      this.config.post("/communityInfo/getCommunityDetail", {}).then((res) => {
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
          if (uni.getStorageSync("community")) {
            self.uniDetail = JSON.parse(uni.getStorageSync("community"));
          } else {
            self.uniDetail = res.data.data;
            uni.setStorageSync("community", JSON.stringify(res.data.data));
          }
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // tab栏切换
    change(index) {
      if (index == 0) {
        this.current = index;
        this.swiperCurrent = index;
        this.getVacList();
      } else if (index == 1) {
        this.current = index;
        this.swiperCurrent = index;
        this.getPhyList();
      } else if (index == 2) {
        this.current = index;
        this.swiperCurrent = index;
        this.getDoor();
      } else {
        this.current = index;
        this.swiperCurrent = index;
        this.getCard(this.list[index].deptId);
      }
    },
    transition({ detail: { dx } }) {
      // this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      // this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      if (this.list[current].deptId) {
        this.getCard(this.list[current].deptId);
      }
    },
    gofin(item) {
      uni.navigateTo({
        url: "/pages/main/old/tjreport?planid=" + item.id,
      });
    },
    // 详情
    goVacDetail(item) {
      uni.navigateTo({
        url: "./upcoming-details?planid=" + item.pid + "&vid=" + item.vid,
      });
    },
    vacConfirm() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/oldInfo/jzAppointment", {
          planId: this.vacId,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.getVacList();
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    vacCancel() {
      this.orderList.map((item) => {
        if (item.id == this.vacId) {
          item.checked = false;
        }
      });
    },
  },
};
</script>

<style scoped>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #ffffff;
}

/* #endif */
</style>

<style lang="scss" scoped>
.uni-item-line::after {
  bottom: -15px !important;
}

// uni-view.u-tabs-box {
//   border-top: 1px solid #eeeeee;
//   border-bottom: 1px solid #eeeeee;
// }

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #ffffff;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

// tap栏
.card {
  background-color: #ffffff;
  padding: 30rpx 10rpx 30rpx 30rpx;
  border-bottom: 1px solid #f2f2f2;

  .infotop {
    margin-bottom: 20rpx;
  }

  .ymname {
    font-size: 32rpx;
    font-weight: bold;
  }

  .ubtn {
    background-color: #1dc7e0;
    border: none;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .u1 {
    background-color: #f68e3a;
  }

  .xinfo {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }

  >>> span {
    color: #ccc !important;
  }
}
</style>
